<template>
	<view class="content">
		<u-navbar :fixed="false" title="编辑用料" :autoBack="true" :safeAreaInsetTop="true" leftIconColor="#fff">
		</u-navbar>

		<view class="MainBox">
			<u--form labelPosition="left" :model="formData" ref="uForm" :rules="rules">
				<u-form-item labelWidth="120" label="产品编号" prop="ProductCode" borderBottom leftIcon="order" required
					@click="openBaseScreen('产品','radio')" :leftIconStyle="{'font-size':'20px'}">
					<u--input v-model="formData.ProductCode" disabled disabledColor="#ffffff" border="none"></u--input>

					<view slot="right" class="x-f" style="color: #999;font-weight: 600;">
						<u-icon name="arrow-right" style="margin-right: 8px;"></u-icon>

						<!-- <view class="x-f" style="width: 40px;height: 100%;justify-content: center;">
							<u-icon name="scan" size="30"></u-icon>
						</view> -->
					</view>
				</u-form-item>

				<u-form-item labelWidth="120" label="产品名称" prop="ProductName" borderBottom leftIcon="file-text"
					:leftIconStyle="{'font-size':'20px'}">
					<u--input v-model="formData.ProductName" disabled disabledColor="#ffffff" border="none"></u--input>
				</u-form-item>

				<u-form-item labelWidth="120" label="产品规格" prop="ProductSpec" leftIcon="file-text"
					:leftIconStyle="{'font-size':'20px'}">
					<u--input v-model="formData.ProductSpec" disabled disabledColor="#ffffff" border="none"></u--input>
				</u-form-item>

				<u-form-item labelWidth="120" label="父件基数" prop="ParentNum" borderBottom leftIcon="coupon"
					:leftIconStyle="{'font-size':'20px'}" required style="margin-top: 10px;">
					<u--input v-model="formData.ParentNum" type="number" placeholder="请输入" border="none"></u--input>
				</u-form-item>

				<u-form-item labelWidth="120" label="子件用量" prop="SunNume" borderBottom leftIcon="coupon"
					:leftIconStyle="{'font-size':'20px'}" required>
					<u--input v-model="formData.SunNume" type="number" placeholder="请输入" border="none"></u--input>
				</u-form-item>

				<u-form-item labelWidth="120" label="损耗率" prop="LossRatio" borderBottom leftIcon="coupon"
					:leftIconStyle="{'font-size':'20px'}">
					<u--input v-model="formData.LossRatio" type="number" placeholder="请输入" border="none"></u--input>
				</u-form-item>

				<u-form-item labelWidth="120" label="用量单位" prop="UnitName" leftIcon="file-text" required
					@click="openBaseScreen('用量单位','radio')" :leftIconStyle="{'font-size':'20px'}">
					<u--input v-model="formData.UnitName" disabled disabledColor="#ffffff" placeholder="请选择"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</u--form>


		</view>


		<view class="BottomBox" :style="$utils.disposeSafeBottomFun()">

			<button class="SaveBtn CommonBtnSize">取消</button>
			<button class="SubBtn CommonBtnSize" @click="SubmitBtn">保存</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					ProductID: '',
					ProductCode: '',
					ProductName: '',
					ProductSpec: '',
					ParentNum: '', // 父件基数
					SunNume: '', // 子件用量
					LossRatio: '', // 损耗率
					UnitName: '', // 单位
					UnitID: '', // 单位
				},
				rules: {
					'ProductCode': {
						type: 'string',
						required: true,
						message: '产品不能为空',
						trigger: ['change']
					},
					'ParentNum': {
						type: 'string',
						required: true,
						message: '父件基数不能为空',
						trigger: ['change']
					},
					'SunNume': {
						type: 'string',
						required: true,
						message: '子件用量不能为空',
						trigger: ['change']
					},
					'UnitName': {
						type: 'string',
						required: true,
						message: '用量单位不能为空',
						trigger: ['change']
					},
				},
			};
		},
		onLoad() {
			var that = this;

			let data = this.$store.state.BaseScreenParm;
			that.formData = Object.assign(that.formData, data);
		},
		mounted() {
			var that = this;
			// 监听 选择产品
			uni.$on('MaterCellInfo_Choice', function(ret) {
				console.log(ret)
				if (ret.type == '产品') {
					// that.formData.ProductName = ret.data.ProductName;
					// that.formData.ProductID = ret.data.Index;
					if (that.$utils.isEmpty(ret.data.ProductSpec)) {
						ret.data.ProductSpec = '-';
					}

					that.formData = Object.assign(that.formData, ret.data);

					this.$store.commit('ChangeAndSetStateData', {
						Name1: 'BaseScreenParm',
						data: {}
					})
				} else if (ret.type == '用量单位') {
					that.formData = Object.assign(that.formData, ret.data);

					that.formData = JSON.parse(JSON.stringify(that.formData))

					this.$store.commit('ChangeAndSetStateData', {
						Name1: 'BaseScreenParm',
						data: {}
					})
				}
			})

		},
		methods: {
			openBaseScreen(str, type) { // 前往筛选页
				let that = this;

				if (type == 'radio') {
					let obj = null;
					let url = '/commonPage/Tool/baseScreen';

					if (str == '产品') {

						obj = {
							allowClear: false,
							cmd: 'XGD_Product',
							type: str,
							ListeningName: 'MaterCellInfo_Choice',
							// multiple: false,
							serverSearch: {
								isPaging: true, //是否分页
								searchKey: '', //搜索关键词，应包含在param中
								showText: 'ProductName', //查询结果显示的字段
								pageIndexStr: 'PageIndex', //分页页码字段，应包含在param中
								subText: [{
									label: '描述',
									labelKey: 'desc'
								}],
								ChoiceDataKey: 'ProductID',
								ChoiceDataData: this.formData.ProductID,
							},
							param: {
								SearchKey: '',
								PageIndex: 1,
								PageSize: 30
							}
						}

						this.$store.commit('ChangeAndSetStateData', {
							Name1: 'BaseScreenParm',
							data: obj
						})

					} else if (str == '用量单位') {
						obj = {
							allowClear: false,
							cmd: 'XGD_Units',
							type: str,
							ListeningName: 'MaterCellInfo_Choice',
							// multiple: false,
							serverSearch: {
								isPaging: true, //是否分页
								searchKey: '', //搜索关键词，应包含在param中
								showText: 'UnitName', //查询结果显示的字段
								pageIndexStr: 'PageIndex', //分页页码字段，应包含在param中
								// subText: [{
								// 	label: '描述',
								// 	labelKey: 'desc'
								// }],
								ChoiceDataKey: 'UnitID',
								ChoiceDataData: this.formData.UnitID,
							},
							param: {
								SearchKey: '',
								PageIndex: 1,
								PageSize: 30
							}
						}

						this.$store.commit('ChangeAndSetStateData', {
							Name1: 'BaseScreenParm',
							data: obj
						})
					};

					uni.navigateTo({
						url: url
					})
				}

			},
			SubmitBtn() { // 保存按钮
				var that = this;
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过');

					uni.$emit('MaterCellInfo_Config', {
						type: '编辑用料',
						msg: '',
						data: that.formData
					});

					uni.navigateBack()

				}).catch(errors => {
					if (Array.isArray(errors)) {
						uni.$u.toast('请完善表单')
					}
				});

			},
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f5f5;

		.MainBox {
			flex: 1;
			overflow: auto;
			// padding: 10px;

			// 表单1
			.u-form {
				// padding: 0px 10px;

				.u-form-item {
					background-color: #fff;
					padding: 0 16px;
				}
			}
		}

		.BottomBox {
			height: 70px;
			line-height: 70px;
			padding: 6px 15px;
			border-top: 1px solid #efefef;
			display: flex;
			align-items: center;
			background-color: #fff;

			.SaveBtn {
				width: 40%;
				background-color: #fff;
				color: #51d0d0;
				border: 1px solid #51d0d0;
				border-radius: 12px;
			}

			.SubBtn {
				width: 40%;
				background-color: #51d0d0;
				color: #fff;
				border-radius: 12px;
			}
		}
	}
</style>